<template>
  <div style="width: 100%; height: 100%">
    <Header title="本年度检测计划完成率" />
    <div class="content">
      <div
        v-for="(item, index) in rateList"
        :id="'myChrts' + index"
        :key="index"
        class="chrts" />
    </div>
  </div>
</template>
<script>
import Header from './header.vue'
import echarts from 'echarts'
import { getPlanCompletionRate } from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'
export default {
  components: {
    Header
  },
  props: {
    conditionFind: {
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      rateList: []
    }
  },
  watch: {
    conditionFind: {
      handler: function(newQuestion, oldQuestion) {
        this.init()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      getPlanCompletionRate(this.conditionFind).then((res) => {
        this.rateList = [
          {
            name: '1c',
            value: res.data.CompleteRate_1C
          },
          {
            name: '2c',
            value: res.data.CompleteRate_2C
          },
          {
            name: '4c',
            value: res.data.CompleteRate_4C
          }
        ]
        this.$nextTick(() => {
          this.initEcharts()
        })
      })
    },
    initEcharts() {
      this.rateList.forEach((item, index) => {
        const myChart = echarts.init(
          document.getElementById(`myChrts${index}`)
        )
        const option = {
          title: {
            // 仪表盘标题。
            text: item.name,
            x: 'center',

            bottom: 20,
            show: true, // 是否显示标题,默认 true。
            textStyle: {
              // 文字颜色
              color: '#606266',
              // 字体大小
              fontSize: 16,
              fontWeight: 'normal',
              fontFamily: 'normal'
            }
          },
          grid: {
            right: '10%',
            left: '10%',
            top: '10%',
            bottom: '10%',
            borderWidth: 1
          },
          xAxis: {
            show: false,
            type: 'category',
            data: ['Mon']
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          series: [
            {
              name: '1C',
              type: 'gauge',
              radius: '60%',
              detail: {
                offsetCenter: [0, '50%'],
                formatter: '{value}%',
                textStyle: {
                  color: '#409EFF',
                  fontSize: 30,
                  fontFamily: 'YouSheBiaoTiHei'
                }
              },
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 180,
              endAngle: 0,
              zlevel: 0,
              data: [
                {
                  value: Number(item.value)
                }
              ],
              legend: {
                padding: 0,
                margin: 0
              },
              pointer: {
                show: true,
                length: '80%',
                radius: '50%',
                width: 3 // 指针粗细
              },
              itemStyle: {
                color: '#2673B8'
              },
              markLine: {
                precision: 2
              },
              axisTick: {
                show: false,
                splitNumber: 5,
                lineStyle: {
                  width: 2
                },
                length: -8
              }, // 刻度样式
              splitLine: {
                show: true,
                length: -8,
                lineStyle: {
                  color: '#BAE7FF' // 用颜色渐变函数不起作用
                }
              }, // 分隔线样式
              axisLabel: {
                show: true,
                distance: -20,
                textStyle: {
                  color: '#969FB5'
                }
              },
              axisLine: {
                show: true,

                lineStyle: {
                  width: 15,
                  color: [
                    [
                      1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: '#68F6FF'
                        },
                        {
                          offset: 0.25,
                          color: '#68EDFF'
                        },
                        {
                          offset: 0.75,
                          color: '#2EA7FF'
                        },
                        {
                          offset: 1,
                          color: '#0168FF'
                        }
                      ])
                    ]
                  ]
                }
              }
            },
            {
              name: '小圆形',
              type: 'pie',
              hoverAnimation: false,
              legendHoverLink: false,
              zlevel: 0,
              radius: ['0%', '5%'],
              tooltip: {
                show: false
              },
              z: 10,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: 100,
                  name: '2',
                  itemStyle: {
                    normal: {
                      color: 'rgba(102, 157, 174, 0.4)'
                    }
                  }
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
}
.chrts {
  height: 100%;
  width: 33.3%;
}
</style>
